<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>设备最新信息</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover">
    <meta http-equiv="x-dns-prefetch-control" content="on" />
    <link rel="stylesheet" href="./vant.css">
    <style>
        html,
        body,
        #app,
        #map {
            height: 100%;
            width: 100%;
            margin: 0;
        }
        
        #app {
            display: flex;
            flex-direction: column;
            background-color: #F8F8F8;
        }
        
        p {
            margin: 0;
            font-size: 14px;
            word-break: break-all;
        }
        
        #app header {
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 16px;
            font-weight: 600;
            background-color: #4E6BBB;
            color: #ffffff;
        }
        
        #app div.map-wrap {
            flex: 1;
            position: relative;
        }
        
        #app div.map-wrap .zoomin {
            width: 40px;
            height: 40px;
            position: absolute;
            right: 5px;
            bottom: 50px;
            background-image: url('../images/zoomin80.png');
            background-size: cover;
        }
        
        #app div.map-wrap .zoomout {
            width: 40px;
            height: 40px;
            position: absolute;
            right: 5px;
            bottom: 5px;
            background-image: url('../images/zoomout80.png');
            background-size: cover;
        }
    </style>
</head>

<body>
    <div id="app">
        <header>设备位置信息</header>
        <div class="map-wrap">
            <div id="map"></div>
            <div class="zoomin" @click="zoomIn"></div>
            <div class="zoomout" @click="zoomOut"></div>
        </div>
    </div>
    <script src="./vue.min.js"></script>
    <script src="./vant.min.js"></script>
    <script src="./axios.min.js"></script>
    <script src="../js/transformlatlon.js"></script>
    <script src="../js/config.js"></script>
    <script src="https://api.map.baidu.com/api?v=3.0&ak=e7SC5rvmn2FsRNE4R1ygg44n"></script>
    <script type="text/javascript">
        new Vue({
            el: "#app",
            data: {
                username: '',
                password: '',
            },
            methods: {
                zoomIn() {
                    this.mapInstance.zoomIn();
                },
                zoomOut() {
                    this.mapInstance.zoomOut();
                },
                getQueryString(name) {
                    var resulturl = null;
                    var allurl = location.search;
                    var theRequest = new Object();
                    if (allurl.indexOf('?') != -1) {
                        var str = allurl.substr(1)
                        var strs = str.split('&')
                        for (var i = 0; i < strs.length; i++) {
                            var value = strs[i].split('=')[1];
                            theRequest[strs[i].split('=')[0]] = value;
                        }
                    }
                    resulturl = theRequest[name];
                    try {
                        resulturl = decodeURIComponent(resulturl);
                    } catch (e) {
                        resulturl = resulturl ? resulturl : '';
                    }

                    return resulturl;
                },
                onSubmit(values) {
                    values.openid = this.openid;
                    var url = 'https://www.gps51.com:8443/webapi?action=bindwxoffice';
                    axios.post(url, values).then((respData) => {
                        var data = respData.data;
                        if (data.status == 0) {
                            this.$toast.success('绑定成功');
                        } else {
                            this.$dialog.alert({
                                message: data.cause,
                            });
                        }
                    }).catch((e) => {
                        this.$toast.error('绑定失败');

                    });
                    console.log('submit', values);
                },
                initMap() {
                    this.mapInstance = new BMap.Map('map', {
                        minZoom: 4,
                        maxZoom: 20,
                        enableMapClick: false
                    })
                    this.mapInstance.enableScrollWheelZoom()
                    this.mapInstance.enableAutoResize()
                    this.mapInstance.enableDoubleClickZoom()
                    this.mapInstance.centerAndZoom(new BMap.Point(108.0017245, 35.926895), 4)

                    this.mapInstance.addControl(
                        new BMap.MapTypeControl({
                            mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]
                        })
                    );
                },
                addMarkerAndInfoWindow() {

                    this.marker = new BMap.Marker(this.point); // 创建标注
                    this.mapInstance.addOverlay(this.marker); // 将标注添加到地图中
                    var sContent = `<div style="width:200px"><p>名称:${this.devicename}</p><p>序号:${this.deviceid}</p><p>时间:${this.updatetime}</p><p>速度:${this.speed}</p><p>报警:${this.alarm}</p><p>状态:${this.status}</p><p>地址:${this.address}</p></div>`;
                    var infoWindow = new BMap.InfoWindow(sContent); // 创建信息窗口对象 
                    infoWindow.disableCloseOnClick();
                    this.marker.addEventListener("click", function() {
                        this.openInfoWindow(infoWindow); //开启信息窗口
                    });
                    var offsetInfoWindow = new BMap.InfoWindow(sContent, {
                        offset: new BMap.Size(0, -25)
                    });
                    offsetInfoWindow.disableCloseOnClick();
                    this.mapInstance.openInfoWindow(offsetInfoWindow, this.point);
                    this.mapInstance.centerAndZoom(this.point, 18);
                },
                init() {

                    var lat = this.getQueryString('lat');
                    var lon = this.getQueryString('lon');
                    var b_lon_and_b_lat = wgs84tobd09(Number(lon), Number(lat));
                    this.point = new BMap.Point(b_lon_and_b_lat[0], b_lon_and_b_lat[1]);
                    this.deviceid = this.getQueryString('deviceid');
                    this.devicename = this.getQueryString('devicename');
                    this.updatetime = this.getQueryString('updatetime');
                    this.speed = (Number(this.getQueryString('speed')) / 1000).toFixed(2) + "km/h";
                    this.alarm = this.getQueryString('alarm');
                    this.status = this.getQueryString('status');
                    this.address = this.getQueryString('address');

                    this.initMap();
                    this.addMarkerAndInfoWindow();

                }
            },
            mounted: function() {
                this.init();

            },
        })
    </script>
</body>

</html>